{% extends 'common/panel.html' %}
{% load absurl %}
{% block title %}{{instance.name}}{% endblock title %}
{% block panel %}
<script type="text/javascript">
    madrona.onShow(function(){
        // Find the public layer tree
        var tree = null;
        for(var i=0; i<madrona.layers.length; i++){
            if(madrona.layers[i].url.indexOf('public') != -1) {
                tree = madrona.layers[i].tree;
                break;
            }
        }
        if (tree) { 
            $('#bookmark_loading').show();
            $.getJSON('{% url bookmark-state-json instance.pk %}', function(data) {
                tree.previousState = data;
                tree.refresh();
                $('#bookmark_loading').hide();
            });
        }
        {% if instance.user.is_staff %}
        var tog = function() {
            $('#show_toggle_details').toggle();
            $('#hide_toggle_details').toggle();
            $('#show_camera_results').toggle();
        };
        $('#show_toggle_details').click(tog);
        $('#hide_toggle_details').click(tog);
        {% endif %}
    });
</script>

<h1>
    <img src="media/bookmarks/images/bookmark.png"/>
    <small><small>Bookmark </small></small>
    &nbsp;&nbsp;{{instance.name}}
</h1>
<span id="bookmark_loading" style="display:none"><img src="/media/kmltree/dist/images/ajax-loader.gif"/></span>
</h1>

<h2>Description</h2>
{{instance.description}}</h2>

<h2>Link</h2>
<textarea id="id_description" name="description" cols="50" rows="3" style="color:grey" readonly="readonly">{% absurl bookmark instance.pk %}</textarea>

{% block linkdescription %}
<p>To share this bookmarked map view with others, you can copy and paste this link to email, online forums, twitter or instant messaging. Some of the features on this map are protected content and may not be visible to all users.</p>
{% endblock linkdescription %}


{% if request.user.is_staff %}
<a href="#" id="show_toggle_details" style="color:grey; font-family: monospace">show details</a>
<a href="#" id="hide_toggle_details" style="display:none; color:grey; font-family: monospace">hide details</a>
<div id="show_camera_results" style="display:none; color:grey; font-family: monospace">
    <ul>
        <li id="instance_latitude">latitude : {{instance.latitude}}</li>
        <li id="instance_longitude">longitude : {{instance.longitude}}</li>
        <li id="instance_altitude">altitude : {{instance.altitude}}</li>
        <li id="instance_heading">heading : {{instance.heading}}</li>
        <li id="instance_tilt">tilt : {{instance.tilt}}</li>
        <li id="instance_roll">roll : {{instance.roll}}</li>
        <li id="instance_altitudeMode">altitudeMode : {{instance.altitudeMode}}</li>
        <li id="instance_altitudeMode">publicstate : {{instance.publicstate}}</li>
    </ul>
</div>
{% endif %}


{% endblock panel %}
